﻿@page "/tree-grid/default-filtering"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data

@*Hidden:Lines*@
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
  <p>This sample demonstrates the default filterbar in Tree Grid. In this sample, type the value in the filterbar and press enter to filter particular column.</p>  
</SampleDescription>
<ActionDescription>
  <p>The filtering feature enables the user to view the reduced amount of records based on filter criteria. It can be enabled
     by setting the <code> AllowFiltering </code> property as true. A filter bar row will be rendered next to the header which allows the end-users to filter data by entering text within its cells.</p>
 <p>Filterbar uses two modes which specifies how to start filtering. They are,</p>
    <ul>
       <li><code>OnEnter</code> - Enabled by default, filter will be initiated after pressing the <code>Enter</code> key.</li>
        <li><code>Immediate</code> - Filter will start after user ends typing. This uses a time delay of <i>1500ms</i> to initiate filter after user stops typing. It can be overridden by using the <code> TreeGridFilterSettings->ImmediateModeDelay </code> property.</li>
    </ul>
    <p>Tree Grid provides support for a set of filtering modes with <code>HierarchyMode</code> property. The type of filter mode available in Tree Grid are as follows. </p>
    <ul>
        <li><code>Parent</code> - This is the default filter hierarchy mode in Tree Grid. The filtered records are displayed with their parent records. If the filtered records do not have any parent record, then the filtered record only will be displayed. </li>
        <li><code>Child</code> - The filtered records are displayed with their child record. If the filtered records do not have any child record, then only the filtered records will be displayed.</li>
        <li><code>Both</code> - The filtered records are displayed with both their parent and child records. If the filtered records do not have any parent and child records, then only the filtered records will be displayed.</li>
        <li><code>None</code> - Only the filtered records are displayed.</li>
    </ul>
    <p>In this demo, <code>Parent</code> hierarchy mode is enabled.</p>
    <p>More information on the filtering can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/filtering/'>documentation section</a>.</p> 
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
           <SfTreeGrid AllowFiltering="true" DataSource="TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" Height="315" TreeColumnIndex="1">
                <TreeGridPageSettings PageSize="10"></TreeGridPageSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="145"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=ColumnType.Date Width="88" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn>
                    <TreeGridColumn Field="Priority" HeaderText="Priority" Width="100"></TreeGridColumn>

                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@code{

    public List<SelfReferenceData> TreeData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeData = SelfReferenceData.GetTree().Take(12).ToList();
    }
}
